<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/message.js"></script>
    <script type="text/javascript" src="../js/myUtil.js"></script>

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="../css/page.css">
    <link rel="stylesheet" type="text/css" href="../css/message.css">

</head>
<body>
    <canvas id="canvas" width="120" height="40" onclick="change()"></canvas>
    <script>
        let canvas = document.getElementById("canvas");
        let context = canvas.getContext("2d");
        context.font = "bold 20px 微软雅黑";

        let nowCode;

        // 回调函数
        let myCallback;

        // 先画一次
        draw();

        // 换一个验证码
        function change(){
            // 清除像素
            context.clearRect(0, 0, 120, 40);
            // 重新画
            draw();
        }

        // 随机颜色函数
        function getColor() {
            let r = Math.floor(Math.random() * 256);
            let g = Math.floor(Math.random() * 256);
            let b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }

        // 画验证码
        function draw() {
            // 绘制矩形
            context.strokeRect(0, 0, 120, 40);

            // 设置验证码元素
            let aCode = "0123456789abcdefghijklmnopqrstuvwxyz";

            // 存放验证码
            let arr = []

            // 绘制字母
            for (var i = 0; i < 4; i++) {
                // 设置偏移量
                var x = 20 + i * 20;
                var y = 20 + 10 * Math.random();

                // 获取数字/字母
                var index = Math.floor(Math.random() * aCode.length);
                var txt = aCode[index];

                // 设置随机颜色
                context.fillStyle = getColor();
                context.translate(x, y);

                // -45 到 45 旋转
                var deg = (90 * Math.random() * Math.PI -45) / 180;

                // 旋转后再画上数字/字母
                context.rotate(deg);
                context.fillText(txt, 0, 0);
                context.rotate(-deg);
                context.translate(-x, -y);
                arr[i] = txt;
            }

            // 干扰
            for (var i = 0; i < 8; i++) {
                // 绘制干扰线条
                context.beginPath();
                context.moveTo(Math.random() * 120, Math.random() * 40);
                context.lineTo(Math.random() * 120, Math.random() * 40);
                context.strokeStyle = getColor();
                context.stroke();

                // 绘制干扰点
                context.beginPath();
                var x = Math.random() * 120;
                var y = Math.random() * 40;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.strokeStyle = getColor();
                context.stroke();
            }

            // 保存新的验证码
            nowCode = arr[0] + arr[1] + arr[2] + arr[3];

            // 给回调函数传输验证码
            myCallback(nowCode);
        }
    </script>
</body>
</html>